<template>
  <div class="panel-account">
    <el-form
      ref="accountFormRef"
      style="max-width: 600px"
      :model="accountForm"
      :rules="rules"
      label-width="60px"
      :size="formSize"
      class="account-form"
      status-icon
    >
      <el-form-item label="帐号" prop="name" size="large">
        <el-input v-model="accountForm.name" type="text" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="密码" prop="password" size="large">
        <el-input
          v-model="accountForm.password"
          type="password"
          autocomplete="off"
          show-password
          clearable
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { useLoginStore } from '@/store/login';
import type { IAccount } from '@/types/login';
import { storage } from '@/utils/storage-util';
import { TOKEN_ACCOUNT } from '@/global/constants';

// Element表单实例
const accountFormRef = ref<FormInstance>();

interface IProps {
  formSize?: 'default' | 'small' | 'large';
}

withDefaults(defineProps<IProps>(), {
  formSize: 'default'
});
// 暴露给父组件的属性

// 表单绑定的数据
const accountForm = reactive<IAccount>({
  name: '',
  password: ''
});

// 表单的验证规则
const rules = reactive<FormRules<IAccount>>({
  name: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    },
    {
      pattern: /^[A-Za-z0-9@_.]{4,20}$/u,
      message: '账号必须为4-20位字母或数字，允许_和@以及.',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
    // {
    //   pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,20}$/,
    //   message: '密码必须包含字母和数字，且长度在6-20位之间',
    //   trigger: 'blur'
    // }
  ]
});

const loginStore = useLoginStore();

/**
 * @function loginByAccount 提交账号密码登录
 */
function loginByAccount(remember: boolean) {
  if (!accountFormRef.value) return;
  accountFormRef.value.validate((valid) => {
    if (valid) {
      const { name, password } = accountForm;
      loginStore
        .loginByAccountAction({ name, password })
        .then(() => {
          if (remember) {
            storage.set(TOKEN_ACCOUNT, {
              name: accountForm.name,
              password: accountForm.password
            });
          } else {
            storage.remove(TOKEN_ACCOUNT);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      ElMessage.warning('您输入的账号或密码不符合规则！');
      return false;
    }
  });
}

/**
 * @function getAccount 获取本地storage中的账号密码
 */
function getAccount() {
  const account = storage.get<IAccount>('account', true);
  if (!account) {
    return;
  } else if (typeof account === 'string') {
    return;
  } else {
    accountForm.name = account.name;
    accountForm.password = account.password;
  }
}

onMounted(() => {
  getAccount();
});

// 暴露给父组件的方法
defineExpose({
  loginByAccount
});
</script>

<style scoped lang="scss">
.panel-account {
  :deep(.el-form-item) {
    padding-right: 10px;
  }

  .account-form {
    margin-top: 20px;
  }
}
</style>
